<template>
	<view class="safe-area-inset-bottom">
		<view class="swip_header">
			<view class="swiplist">
				<swiperTabHead :tabBars="tabList" :tabIndex="tabIndex" @tabtap="tabtap"></swiperTabHead>
			</view>
			<view class="slot-box">
				<view style="width: 100%;">
					<uni-search-bar v-model="queryParams.staffName" type="text" @confirm="handleQuery" @input="handleQuery" placeholder="请输入角色名称" v-if="tabIndex == 0" />
					<uni-search-bar v-model="queryParams.inviteName" type="text" @confirm="handleQuery" @input="handleQuery" placeholder="请输入角色名称" v-if="tabIndex == 1" />
				</view>
			</view>
		</view>
		
		<!-- 申请列表 -->
		<view style="margin-top: 205rpx;" v-if="tabIndex == 0">
		<view v-if="applicationList != ''" >
		<view v-for="item,index in applicationList" :key="index">
			<view class="add-find-box card-border" style="margin:20rpx;">
			<view class="flex_between">
				<p class="grid-integral">员工姓名：{{ item.staffName }}</p>
				<button size="mini" class="green_btn" v-if="item.status != 1" @click.stop="handleRefuse(item)">驳回申请</button>
			</view>	
			<p class="grid-integral">手机号码：{{ item.mobile }}</p>
			<p class="grid-integral">申请时间：{{ item.applyTime }}</p>
			<p class="grid-integral">审核状态：
			<span v-if="item.status == 1">已同意</span>
			<span v-else>--</span></p>
			<view class="flex_between">
				<p class="grid-integral">账号状态：
				<span v-if="item.status == 1">正常</span>
				<span v-if="item.status == 0">停用</span>
				</p>
				<button size="mini" type="warning" @click="handleAgree(item)" v-if="item.status != 1" class="green_btn">同意加入</button>
			</view>
			</view>			
		</view>
		</view>
		<!-- 暂无数据 -->
		<luanqingEmpty :show="true" text="没有更多数据啦" v-else />
		</view>
		
		<!-- 邀请列表 -->
		<view style="margin-top: 205rpx;" v-if="tabIndex == 1">
		<view v-if="invitation != ''" >
		<view v-for="item,index in invitation" :key="index">
			<view class="add-find-box card-border" style="margin:20rpx;">
			<view class="flex_between">
				<p class="grid-integral">员工姓名：{{ item.inviteName }}</p>
				<button size="mini" class="green_btn" v-if="item.status == 0" @click.stop="aiaginInvitation(item)">再次邀请</button>
			</view>	
			<p class="grid-integral">手机号码：{{ item.inviteMobile }}</p>
			<p class="grid-integral">员工职位：
			<span v-if="item.invitePost != null">{{ item.invitePost }}</span>
			<span v-else>--</span>
			</p>
			<p class="grid-integral">员工部门：{{ item.inviteDeptName }}</p>
			<p class="grid-integral">权限角色：{{ item.inviteRoleName }}</p>
			<p class="grid-integral">加入状态：
			<span v-if="item.status == 1">已邀请</span>
			<span v-if="item.status == 0">未邀请</span>
			</p>
			<view class="flex_between">
				<p class="grid-integral">邀请时间：{{ item.createTime }}</p>
				<button size="mini" type="warning" @click="handleRevoke(item)" v-if="item.status == 1" class="green_btn">移除邀请</button>
			</view>
			</view>			
		</view>
		</view>
		<!-- 暂无数据 -->
		<luanqingEmpty :show="true" text="没有更多数据啦" v-else />
		</view>
		
	</view>
</template>

<script>
	import {listStaffInvite, updateStaffInviteRevoke} from "@/api/ec/console/org/staffInvite";
	import {listStaffApplyForCompany, updateStaffApply} from "@/api/ec/common/staffApply";
	import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
	import swiperTabHead from "@/components/slideTab/slideTab";
	import {updateStaff} from "@/api/ec/console/org/staff";
	export default {
		components: {
			swiperTabHead,luanqingEmpty
		},
		data() {
			return {
				// 查询参数
				queryParams: {
				  pageNum: 1,
				  pageSize: 10,
				  staffName: undefined,
				  mobile: undefined,
				  inviteName: undefined,
				  inviteMobile: undefined
				},                 
				tabList: [{
					title: '申请列表'
				}, {
					title: '邀请列表'
				}],
				tabIndex: 0,
				applicationList:[],//申请列表
				invitation:[],//邀请列表
			}
		},
		onLoad() {
			this.getApplication() //获取申请的数据
			this.getInvitation() //获取邀请数据
		},
		methods: {
			/** 再次邀请 */
			aiaginInvitation(item){
				console.log(item)
				let data = {
					name:item.inviteRoleName,
					mobile:item.inviteMobile,
					staffPost:item.invitePost,
					deptId:item.inviteDeptId,
					roleIds:item.inviteRole.split(''),
					id:item.id
				}
				updateStaff(data).then(response=>{
					this.$modal.msgSuccess("再次邀请成功");
				})
			},
			/** 移除邀请 */
			handleRevoke(item){
				const data = {id:item.id}
				updateStaffInviteRevoke(data).then(()=>{
					this.getInvitation() //获取邀请数据
					this.$modal.msgSuccess("移除邀请成功！");
				})
			},
			/** 驳回申请 */
			handleRefuse(item){
				uni.showModal({
					title: '系统提示',
					confirmColor:'#00a660',
					content: '您将拒绝【' + item.staffName + '】加入该企业，确定操作吗？',
					success: function (res) {
						if (res.confirm) {
							const data ={id: item.id, status: 0}
							updateStaffApply(data).then(response=>{
							this.getApplication()
							this.$modal.msgSuccess("已拒绝加入");
					    })
						} else if (res.cancel) {
							
						}
					 }
				});
			},
			/** 同意加入 */
			handleAgree(item){
				uni.showModal({
					title: '系统提示',
					confirmColor:'#00a660',
					content: '同意后【' + item.staffName + '】将成为该企业新成员，确定同意吗？',
					success: function (res) {
						if (res.confirm) {
							const data ={id: item.id, status: 1}
							updateStaffApply(data).then(response=>{
							this.getApplication()
							this.$modal.msgSuccess("新成员已成功加入");
					    })
						} else if (res.cancel) {
							
						}
					 }
				});
			},
			/** 申请列表 */
			getApplication(){
        this.$modal.loading();
				listStaffApplyForCompany(this.queryParams).then(response => {
				  uni.hideLoading()
				  this.applicationList = response.rows;
				});     
			},
			/** 邀请列表 */
			getInvitation(){
        this.$modal.loading();
				listStaffInvite(this.queryParams).then(response => {
				  uni.hideLoading()
				  this.invitation = response.rows;
				});     
			},
			/** 搜索 */
			handleQuery(){
					if(this.tabIndex == 0){
						this.getApplication()
					}else if(this.tabIndex == 1){
						this.getInvitation()
					}
			},
			/** 接受子组件传过来的值点击切换导航 */
			tabtap(index) {
				var _this = this
				_this.tabIndex = index;
			},
		}
	}
</script>
